// node环境下完美兼容 ES高级语法
// const gulp = require("gulp");

const { src, dest, watch } = require("gulp");

// 会自动读取当前文件中的package.json文件描述的依赖
// 并将所有已 gulp- 开头的依赖组合成对象，并返回
// 所有的 gulp- 模块将删除 gulp- ,只保留真实名称进行返回
// 如果插件名称为多单词的 连字符 会转换为 驼峰
const loadPlugins = require("gulp-load-plugins");//统一模块装载器，可以根据 package.json 中记录的gulp-开头插件进行自动装载，无需手动导入
// const plugins=loadPlugins();
const $ = loadPlugins();

const config = require("./config");//将下面的配置项都写在config目录下

const errorOpt = {
    // errorHander:function(error){
    //     $.notify.onError("执行错误："+error.mesage);
    // }
    errorHandler:$.notify.onError("执行错误：<%= error.message %>")

}

const browserSync = require("browser-sync");//引入服务器热更新模块

const serverObj = browserSync.create();//创建执行服务器


// 定义服务器任务
const initServer = function(){
    // 初始化服务器相关配置
    serverObj.init({
        server:{
            baseDir:config.path.dist
        }
    });

    // 设置监控的服务器地址的文件变化，返回一个监控对象
    let watcher = watch(config.path.dist);
    // 通过监控对象的 change事件绑定，实现当文件发生变化时重载浏览器，实现热更新
    watcher.on("change",function(){
        serverObj.reload();
    });
}




//对JS的操作
//    +兼容语法的转化
//    +代码的混淆压缩

const jsTask = function (done) {
    src(config.path.src + "js/**/*.js")
        .pipe($.plumber(errorOpt))
        .pipe($.babel(config.babel))//兼容语法的转换
        .pipe(dest(config.path.dist + "js")) //未压缩的文件
        .pipe($.rename({
            suffix: ".min"
        }))
        .pipe($.uglify())          //实现代码压缩
        .pipe(dest(config.path.dist + "js"));
    done();
}

//对css的操作
//    +兼容语法的转化（浏览器前缀自动增加）
//    +压缩
const cssTask = function (done) {
    src(config.path.src + "css/**/*.css")
        .pipe($.plumber(errorOpt))
        .pipe($.autoprefixer())
        .pipe(dest(config.path.dist + "css/"))
        .pipe($.cleanCss(config.css))
        .pipe($.rename({
            suffix: ".min"
        }))
        .pipe(dest(config.path.dist + "css/"));
    done();

}


//对less的操作
const lessTask = function (done) {
    src([
        config.path.src + "less/**/*.less",
        "!" + config.path.src + "less/module/**/*.less" //主less文件引用的其他less文件不需要导入到dist目录下
    ])
        .pipe($.plumber(errorOpt))
        .pipe($.less())
        .pipe($.autoprefixer())
        .pipe(dest(config.path.dist + "css/"))
        .pipe($.cleanCss(config.css))
        .pipe($.rename({
            suffix: ".min"
        }))
        .pipe(dest(config.path.dist + "css/"));
    done();
}


//对html的操作
const htmlTask = function(done){
    src(config.path.src+"**/*.html")
        .pipe($.plumber(errorOpt))
        .pipe($.htmlmin(config.html))
        .pipe(dest(config.path.dist));
    done();
}

//清空dist目录任务
const cleanTask = function(done){
    src(config.path.dist+"**/*",{read:false})
        .pipe($.clean());
    done();
}


const watcherFun = function () {
    // watch(config.path.src, jsTask);//watch只能写一个任务
    const opt={
        ignoreInitial:false
    };//用gulp开启watch时不会自动加载这些任务，当设置这个后会自动执行任务。
    watch(config.path.src+"js/**/*.js",opt,jsTask);
    watch(config.path.src+"less/**/*.less",opt,lessTask);
    watch(config.path.src+"**/*.html",opt,htmlTask);
    initServer();
}
// exports.jsTask=jsTask;
module.exports = {
    default: watcherFun,//直接在命令行敲gulp
    // jsTask,
    // cssTask,
    // lessTask,
    // htmlTask,
    clean:cleanTask
};